<template>
	<view>
		<view class="pageTitle">
			{{pageTitle}}
			<view class="subTitle" v-if="step === 1 && !canVerify">验证码已发送到 {{phone}}</view>
		</view>

		<u-message-input active-color="#0FBD80" :mode="inputMode" :disabled-keyboard="true" :width="90" :maxlength="6" :dot-fill="!isVerify"
			:value="imitateValue"></u-message-input>

		<view class="warning pwd" v-if="step > 1">请设置支付密码，不能是连续数字，用于会员支付</view>
		<view class="warning verify" v-if="!canVerify && step === 1">{{time}}秒后重新获取验证码</view>
		<view class="warning verify" v-if="canVerify && step === 1" @click="getVerify">获取验证码</view>
		<u-keyboard ref="uKeyboard" mode="number" @change="valChange" @backspace="backspace" v-model="keyboardShow"
			:confirm-btn="false" :cancel-btn="false" :mask="false" :safe-area-inset-bottom="true" :show-tips="false"
			:dot-enabled="false" :mask-close-able="false" @confirm="submit"></u-keyboard>

		<u-toast ref="uToast" />
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isVerify: false,
				inputMode: 'bottomLine',
				pageTitle: "输入验证码",
				step: 1,
				password: "",
				keyboardShow: true,
				verify: "",
				cfPassword: "",
				phone: "",
				imitateValue: "",
				time: 90,
				timer: "",
				canVerify: true,
				from: ""
			}
		},
		onShow() {
			this.phone = uni.getStorageSync('userPhone')
			// this.getVerify()
		},
		onLoad(option) {
			if (option.from != "" && option.from != null) {
				this.from = option.from
			}
		},
		methods: {
			valChange(val) {
				let that = this
				// 将每次按键的值拼接到value变量中，注意+=写法
				if (that.imitateValue.length < 6) {
					that.imitateValue += val
					if (that.imitateValue.length == 6) {
						switch (that.step) {
							case 1:
								if (that.canVerify) {
									that.$toast('请先发送验证码', that)
									that.imitateValue = ''
									return
								}
								that.$api.getCheckCode({
									checkType: 1,
									mobile: that.phone,
									code: that.imitateValue
								}).then(res => {
									that.step++
									that.pageTitle = "设置支付密码"
									that.inputMode = "box"
									that.imitateValue = ""
								}, () => {
									that.imitateValue = ''
								})
								break;
							case 2:
								that.password = that.imitateValue
								that.imitateValue = ""
								that.step++
								that.inputMode = "box"
								that.pageTitle = "再次输入支付密码"
								break;
							case 3:
								if (that.imitateValue != that.password) {
									that.$toast('两次密码不一致', that)
									that.imitateValue = ""
									return;
								}
								that.cfPassword = that.imitateValue
								// that.imitateValue = ""
								that.submit()
								break;
						}
					}
				}
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.imitateValue.length) this.imitateValue = this.imitateValue.substr(0, this.imitateValue.length -
					1);
			},
			submit() {
				let that = this
				let params = {
					cfPassword: that.cfPassword,
					mobile: that.phone,
					password: that.password
				}
				that.keyboardShow = true
				that.$api.setPayPwd(params).then((res) => {
					uni.showToast({
						title: '设置成功',
						icon: "success",
						duration: 2000,
						success: () => {
							setTimeout(function() {
								uni.navigateBack({
									delta: 1, //返回层数，2则上上页
								})
							}, 2000)
						}
					})
				})
			},
			cutDown() {
				this.time--
				if (this.time == 0) {
					this.canVerify = true
					clearInterval(this.timer)
				}
			},
			getVerify() {
				let that = this
				if (!that.canVerify) {
					return false
				}
				let params = {
					mobile: that.phone,
					lang: "zh"
				}
				that.$api.getVerify(params).then((res) => {
					that.time = 90
					that.canVerify = false
					that.timer = setInterval(that.cutDown, 1000)
					uni.showToast({
						title: '验证码已发送',
						icon: "none"
					})
				})
			},
		}
	};
</script>

<style scoped lang="less">
	.pageTitle {

		margin-bottom: 50rpx;

		.subTitle {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #202020;
			line-height: 36rpx;
			margin-top: 20rpx;
		}
	}

	/deep/.u-drawer,
	.u-mask {
		position: static !important;
	}

	.warning {
		font-size: 26rpx;
		padding: 0 48rpx;

		&.pwd {
			color: #999999;
			margin-top: 20rpx;
			text-align: center;
		}

		&.verify {
			color: #0FBD80;
			margin-top: 66rpx;
		}
	}
</style>